<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- v-if 
       写法： v-if="表达式"
              v-else-if="表达式"
              v-else
       适用于：切换频率较低场景
       
       v-show:
       写法：v-show="表达式"
       适用于：切换频率较高场景
       特点：不显示的DOM不会被移除，设置样式不展示style="display: none;"
  
  -->
  <!-- 准备好一个容器-->
  <div id="app">
    <!-- v-show条件渲染 -->
    <h2 v-show="false">欢迎{{name}}1</h2>
    <h2 v-show="1===1">欢迎{{name}}2</h2>
    <!-- v-if条件渲染 -->
    <h2 v-if="display">欢迎{{name}}3</h2>
    <h2 v-if="1===1">欢迎{{name}}4</h2>
    <hr/>
    当前n的值是：{{n}}<br/>
    <button @click="n++">点我加1</button>
    <h2 v-if="n===1">Vue</h2>
    <h2 v-else-if="n===2">React</h2>
    <h2 v-else-if="n===3">Angular</h2>
    <h2 v-else>LayUI</h2>
    <br/><br/>
    <h2 v-show="n===1">Vue</h2>
    <h2 v-show="n===2">React</h2>
    <h2 v-show="n===3">Angular</h2>
    <h2 v-show="n===4">LayUI</h2>
   
    <hr/>
    <!-- v-if和template配合使用，不会增加标签
      <div v-if="n===1">会增加一个div标签
    -->
    <div v-if="n===1">
      <h2>Java</h2>
      <h2>H5</h2>
    </div>
    <template v-if="n===1">
      <h2>Java</h2>
      <h2>H5</h2>
    </template>


  </div>
  <script src="vue.js"></script>
  <script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    //创建vue实例
    new Vue({
      el: '#app',
      data: {
        name: 'zhangsan',
        display: false,
        n: 1
      }
    })
  </script>
</body>

</html>